<!-- 款式引导 -->
<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-goods"></i> 款式引导设置 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-tabs v-model="categoryactiveName">
                <!-- 首页大类列表 -->
                <el-tab-pane label="首页大类列表" name="first">
                    <div class="handle-box">
                        <el-button type="danger" @click="btndellist"><i class="el-icon-delete-solid"></i>批量删除</el-button>
                        <el-input placeholder="用户名" class="handle-input mr10 userhandle" v-model="categoryvalueKey"></el-input>
                        <el-button type="primary" icon="el-icon-search" @click="Search">搜索</el-button>
                        <el-button type="primary" id="adduser" @click="firstbtn"><span class="add">+</span> 新增</el-button>
                    </div>
                    <!-- 首页大类列表表格 -->
                    <el-table
                        :data="Customeruserlist"
                        border
                        class="table"
                        ref="multipleTable"
                        header-cell-class-name="table-header"
                        @selection-change="handleSelectionChange"
                    >
                        <el-table-column type="selection" width="55" align="center"> </el-table-column>
                        <el-table-column prop="type" label="模式" align="center"></el-table-column>
                        <el-table-column prop="sort" label="排序" align="center"></el-table-column>
                        <el-table-column prop="type_name" label="名称" width="180" align="center"></el-table-column>
                        <el-table-column label="状态" align="center" width="200">
                            <template slot-scope="scope">
                                <el-switch
                                    v-model="scope.row.states"
                                    active-value="1"
                                    inactive-value="2"
                                    active-text="显示中"
                                    inactive-text="不显示"
                                    @change="changeSwitch($event, scope.row, scope.$index)"
                                ></el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="400" align="center">
                            <template slot-scope="scope">
                                <el-button @click="categorybtnView(scope.row)" class="bd_item"><i class="el-icon-edit"></i>详情</el-button>
                                <el-button plain @click="Customerbtnchange(scope.row)" class="bd_item"
                                    ><i class="el-icon-edit"></i>编辑</el-button
                                >
                                <el-button plain @click="CustomerbtnObtain(scope.row)" class="del_item"
                                    ><i class="el-icon-delete"></i>删除</el-button
                                >
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 首页大类表格分页 -->
                    <el-pagination
                        background
                        layout="total,prev, pager, next"
                        :total="count"
                        :page-size="10"
                        @current-change="handleCurrentChange"
                        :current-page.sync="queryinfo.page"
                        @size-change="handleSizeChange"
                    >
                    </el-pagination>
                </el-tab-pane>
                <!-- 详情 -->
                <el-tab-pane label="详情" name="second">
                    <template v-if="categoryactiveName === 'second'">
                        <!-- 详情搜索框 -->
                        <div class="handle-box">
                            <el-button type="danger" @click="CategoryAndBatchDel"><i class="el-icon-delete-solid"></i>批量删除</el-button>
                            <el-input placeholder="标题" class="handle-input mr10 userhandle" v-model="categoryKey"></el-input>
                            <el-button type="primary" icon="el-icon-search" @click="caterorySearch">搜索</el-button>
                            <el-button type="primary" id="adduser" @click="btnaddCategory"><span class="add">+</span> 新增</el-button>
                        </div>
                        <!-- 详情表格 -->
                        <el-table
                            :data="categorylist"
                            border
                            class="table"
                            ref="multipleTable"
                            header-cell-class-name="table-header"
                            @selection-change="categoryhandleSelectionChange"
                        >
                            <el-table-column type="selection" width="55" align="center"> </el-table-column>
                            <el-table-column prop="type_img" label="商品图" width="180" align="center">
                                <template slot-scope="scope">
                                    <el-image
                                        style="width: 100px; height: 100px"
                                        :src="scope.row.prefix_img"
                                        :preview-src-list="categorysrcList"
                                    ></el-image>
                                </template>
                            </el-table-column>
                            <el-table-column prop="sort" label="排序" align="center"></el-table-column>
                            <el-table-column prop="title" label="标题" align="center"></el-table-column>
                            <el-table-column prop="content_text" label="文本一" align="center"></el-table-column>
                            <el-table-column prop="type_content" label="文本二" align="center"></el-table-column>
                            <el-table-column prop="style_no" label="款式编号" align="center"></el-table-column>
                            <el-table-column label="状态" align="center" width="200">
                                <template slot-scope="scope">
                                    <el-switch
                                        v-model="scope.row.states"
                                        active-value="1"
                                        inactive-value="2"
                                        active-text="显示中"
                                        inactive-text="不显示"
                                        @change="changeSwitch1($event, scope.row, scope.$index)"
                                    ></el-switch>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="200" align="center">
                                <template slot-scope="scope">
                                    <el-button plain @click="categorybtnchange(scope.row)" class="bd_item"
                                        ><i class="el-icon-edit"></i>编辑</el-button
                                    >
                                    <el-button plain @click="categorydel(scope.row)" class="del_item"
                                        ><i class="el-icon-delete"></i>删除</el-button
                                    >
                                </template>
                            </el-table-column>
                        </el-table>
                        <!-- 查看表格分页 -->
                        <div class="block">
                            <el-pagination :page-size="100" layout="total, prev, pager, next" :total="type_count"> </el-pagination>
                        </div>
                    </template>
                </el-tab-pane>
            </el-tabs>
        </div>
        <!--点击首页大类编辑按钮-->
        <el-dialog title="编辑" :visible.sync="CuDialogVisiblechange" width="30%">
            <el-form :model="firstruleForm" status-icon ref="firstruleForm" label-width="100px" class="demo-firstruleForm">
                <el-form-item label="名称" prop="type_name">
                    <el-input type="text" v-model="firstruleForm.Name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="模式" prop="type_name">
                    <el-select v-model="firstruleForm.value" placeholder="请选择" filterable @change="firstchangeValue">
                        <el-option v-for="(item, key) in firstdropDown" :key="item['key']" :label="item" :value="key"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input type="text" v-model="firstruleForm.sort" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="states">
                    <template>
                        <el-switch
                            v-model="firstruleForm.states"
                            active-value="1"
                            inactive-value="2"
                            active-text="显示"
                            inactive-text="不显示"
                        ></el-switch>
                    </template>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="CuDialogVisiblechange = false">取 消</el-button>
                <el-button type="primary" @click="CubtnBinding">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 点击大类列表新增弹出框 -->
        <el-dialog title="编辑" :visible.sync="newVisiblechange" width="30%" :before-close="handleClosetype">
            <el-form :model="firstEjectFrom" status-icon ref="newruleForm" label-width="100px" class="demo-firstruleForm">
                <el-form-item label="名称" prop="type_name">
                    <el-input type="text" v-model="firstEjectFrom.type_name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="模式" prop="type">
                    <el-select v-model="value" placeholder="请选择" filterable @change="changeValue">
                        <el-option v-for="(item, key) in firstdropDown" :key="item['key']" :label="item" :value="key"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input type="text" v-model="firstEjectFrom.sort" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="states">
                    <template>
                        <el-switch
                            v-model="firstEjectFrom.states"
                            active-value="1"
                            inactive-value="2"
                            active-text="显示"
                            inactive-text="不显示"
                            @change="changeSwitch2($event)"
                        ></el-switch>
                    </template>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="ListCancel">取 消</el-button>
                <el-button type="primary" @click="firstNewbtnAdd">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 点击详情编辑弹出框 -->
        <el-dialog title="编辑" :visible.sync="categoryVisiblechange" width="30%">
            <el-form :model="categoryruleForm" status-icon ref="categoryruleForm" label-width="100px" class="demo-firstruleForm">
                <el-form-item label="排序" prop="DetailsDditorSort">
                    <el-input type="number" v-model="categoryruleForm.sort" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="标题" prop="DetailsDditorTiltle">
                    <el-input type="text" v-model="categoryruleForm.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="文本一" prop="DetailsDditorTitletext">
                    <el-input type="text" v-model="categoryruleForm.content_text" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="文本二" prop="DetailsDditortype_content">
                    <el-input type="text" v-model="categoryruleForm.type_content" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="款式编号" prop="DetailsDditorStyle_no">
                    <el-input type="text" v-model="categoryruleForm.style_no" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="states">
                    <template>
                        <el-switch
                            v-model="categoryruleForm.states"
                            active-value="1"
                            inactive-value="2"
                            active-text="显示"
                            inactive-text="不显示"
                        ></el-switch>
                    </template>
                </el-form-item>
                <el-form-item label="编辑图">
                    <el-upload
                        class="avatar-uploader"
                        action="http://yztapi.medozb.com/api/admin/upload_img"
                        :data="{
                            token: queryinfo.token,
                            url: 'slideshow',
                            is_name: 0
                        }"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                    >
                        <img v-if="categoryruleForm.prefix_img" :src="categoryruleForm.prefix_img" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="categoryruleForm.prefix_img" alt="" />
                    </el-dialog>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="categoryVisiblechange = false">取 消</el-button>
                <el-button type="primary" @click="categoryedit">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 点击详情新增弹出框 -->
        <el-dialog title="编辑" :visible.sync="newVisiblecaterory" width="30%" :before-close="handleClose">
            <el-form :model="NewruleFormcaterory" status-icon ref="newForm" label-width="100px" class="demo-firstruleForm">
                <el-form-item label="排序" prop="detailsSort">
                    <el-input type="number" v-model="NewruleFormcaterory.sort" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="标题" prop="detailsTiltle">
                    <el-input type="text" v-model="NewruleFormcaterory.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="文本一" prop="detailsTitletext">
                    <el-input type="text" v-model="NewruleFormcaterory.content_text" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="文本二" prop="detailStype_content">
                    <el-input type="text" v-model="NewruleFormcaterory.type_content" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="款式编号" prop="detailStyle_no">
                    <el-input type="text" v-model="NewruleFormcaterory.style_no" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="states">
                    <template>
                        <el-switch
                            v-model="NewruleFormcaterory.states"
                            active-value="1"
                            inactive-value="2"
                            active-text="显示"
                            inactive-text="不显示"
                            @change="categorychangeswitch($event)"
                        ></el-switch>
                    </template>
                </el-form-item>
                <el-form-item label="新增图">
                    <el-upload
                        class="avatar-uploader"
                        action="http://yztapi.medozb.com/api/admin/upload_img"
                        :data="{
                            token: queryinfo.token,
                            url: 'slideshow',
                            is_name: 0
                        }"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                    >
                        <img v-if="imageUrls" :src="imageUrls" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="imageUrls" alt="" />
                    </el-dialog>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelbtn('newForm')">取 消</el-button>
                <el-button type="primary" @click="NewbtnAddcategory">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            categoryactiveName: 'first',
            // 获取用户列表的参数
            queryinfo: {
                token: '',
                page: 1,
                page_size: 10,
                keyword: this.categoryvalueKey
            },
            //首页列表
            Customeruserlist:[],
            //首页大类新增弹出框开始
            //弹出框表单
            firstEjectFrom: {
                states: 2,
                sort: '',
                type:'',
                type_name:'',
            },
            // 修改首页大类表格
            newVisiblechange: false,
            //分页
            count: 0,
            // 下拉列表
            firstdropDown: [],
            //下拉列表value值
            value: '',
            //下拉的arrange里获取传key
            type_key: '',
            //首页大类新增弹出框结束
            // <!------------------------------->

            //首页大类列表编辑开始
            //首页大类列表更改
            CuDialogVisiblechange: false,
            //编辑表单
            firstruleForm: {
                sort: '',
                Name: '',
                states: '',
                value: '',
                states: 2
            },
            //编辑对应的id
            edit_id: '',
            //编辑对应type对应的key
            edit_key:'',
            //全选对应的id
            SelectAll_id: '',
            //首页大类列表编辑结束
            //详情开始 <!------------------------------->
            //点击详情新增弹出框表格form
            //详情表图片数组
            categorysrcList: [],
            NewruleFormcaterory: {
                sort: '',
                prefix_img: '',
                style_no: '',
                title: '',
                type_content: '',
                content_text: ''
            },
            type: '',
            //详情弹出框
            newVisiblecaterory:false,
            //详情key
            categoryKey:'',
            edit_type:'',
            //详情列表
            //详情分页total
            type_count:0,
            categorylist:[],
            //上传图片
            imageUrls: '',
            imageUrl: '',
            details_id: '',
            SelectAllDetails: '',
            //详情编辑开始
            categoryVisiblechange:false,
            //点击编辑表单弹出框
            categoryruleForm: {
                sort: '',
                type: '',
                prefix_img: '',
                style_no: '',
                title: '',
                states: '',
                content_text: '',
                type_content:'',
            },
            dialogVisible: false,
            edit_img:'',
            detailsedit_id:'',
            categoryvalueKey:'',
            //详情编辑结束
            //详情结束 <!------------------------------->
        };
    },
    created() {
        this.getkey();
        this.Cugetlist();
        this.ListDropdown()
    },
    mounted() {
        this.options = this.firstdropDown;
    },
    methods: {
        // 获取token
        getkey() {
            this.queryinfo.token = sessionStorage.getItem('token');
        },
        //首页大类列表
        async Cugetlist() {
            const { data: res } = await this.$axios.get('admin/type_list', {
                params: this.queryinfo
            });
            if (res.code !== 2000) {
                return this.$message.error('获取首页大类列表失败');
            }
            this.Customeruserlist = res.data.data;
            this.count = res.data.count;
            console.log(this.Customeruserlist)
        },
        //详情列表
        ListofDetails() {
            this.$axios
                .get('admin/index_list', {
                    params: {
                        token: this.queryinfo.token,
                        id: this.details_id,
                        page: this.queryinfo.page,
                        page_size: this.queryinfo.page_size,
                        keyword: this.categoryKey
                    }
                })
                .then((res) => {
                    this.categorylist = res.data.data.data;
                });
        },
        //列表下拉
        ListDropdown() {
            this.$axios
                .get('admin/index_pull', {
                    params: {
                        token: this.queryinfo.token
                    }
                })
                .then((res) => {
                    // console.log(res)
                    this.firstdropDown = res.data.data.arrange;
                })
                .catch((err) => {});
        },
        // 首页大类列表switch开关
        changeSwitch(e, row, index) {
            console.log(e, row, index);
            console.log(this.firstdropDown)
            let id = ''
            for(let key in this.firstdropDown){
                if(this.firstdropDown[key] === row.type){
                   id = key
                }
            }
            console.log(id)
            this.$axios
                .post('admin/type_update', {
                    token: this.queryinfo.token,
                    id: row.id,
                    type_name: row.type_name,
                    type: id,
                    sort: row.sort,
                    states: row.states
                })
                .then((res) => {});
        },
        // 点击首页品类列表新增按钮,下拉框
        firstbtn() {
            this.newVisiblechange = true;
            this.ListDropdown();
        },
        //获取新增列表弹出框下拉框
        changeValue(val) {
            this.type_key = val;
        },
        //首页大类点击确定按钮
        firstNewbtnAdd() {
            this.newVisiblechange = false;
            this.$axios
                .post('admin/type_add', {
                    token: this.queryinfo.token,
                    type_name: this.firstEjectFrom.type_name,
                    type: this.type_key,
                    sort: this.firstEjectFrom.sort,
                    states: this.firstEjectFrom.states
                })
                .then((res) => {
                    this.$message.success('新增成功');
                    this.Cugetlist();
                    this.firstEjectFrom.type_name = '', 
                    this.value = ''
                    this.firstEjectFrom.sort = '', 
                    this.firstEjectFrom.states = 2;
                });
        },
        // 点击首页大类删除按钮
        CustomerbtnObtain(row) {
            console.log(row.id);
            this.$confirm('会同时删除属于这个大类的子类，确定删除吗', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then((action) => {
                    if (action === 'confirm') {
                        this.$axios
                            .get('admin/type_delete', {
                                params: {
                                    token: this.queryinfo.token,
                                    id: row.id
                                }
                            })
                            .then((res) => {
                                if (res.status == 200) {
                                    this.$message({
                                        type: 'success',
                                        message: '删除成功!'
                                    });
                                }
                                this.Cugetlist();
                            });
                    }
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        // 首页大类编辑事件
        Customerbtnchange(row) {
            console.log(row)
            this.CuDialogVisiblechange = true;
            this.firstruleForm.sort = row.sort;
            this.firstruleForm.Name = row.type_name;
            this.firstruleForm.states = row.states;
            this.firstruleForm.value = row.type;
            this.edit_id = row.id;
            for(let key in this.firstdropDown){
                if(this.firstdropDown[key] === this.firstruleForm.value){
                   this.edit_key = key
                }
            }
            console.log(this.edit_key)
            this.ListDropdown();
        },
        // 首页大类编辑点击事件
        async CubtnBinding() {
            this.$axios
                .post('admin/type_update', {
                    token: this.queryinfo.token,
                    id: this.edit_id,
                    type_name: this.firstruleForm.Name,
                    type: this.firstruleForm.value,
                    sort: this.firstruleForm.sort,
                    states: this.firstruleForm.states
                })
                .then((res) => {
                    console.log(res.status);
                    if (res.status !== 200) {
                        this.$message.error('修改失败');
                        return;
                    }
                    this.$message.success('修改成功');
                    this.CuDialogVisiblechange = false;
                    this.Cugetlist();
                });
        },
        //编辑大类弹出框下拉
        firstchangeValue(val) {
            this.type_key = val;
        },
        // 触发首页搜索按钮
        Search() {
            this.queryinfo.keyword = this.categoryvalueKey;
            this.Cugetlist();
            // console.log(this.keyword)
        },
        //详情全选
        categoryhandleSelectionChange(val) {
            this.SelectAllDetails = val
                .map(function (obj, index) {
                    return obj.id;
                })
                .join(',');
        },
        //详情批量删除
        CategoryAndBatchDel() {
            this.$confirm('会同时删除属于这个大类的子类，确定删除吗', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then((action) => {
                    if (action === 'confirm') {
                        this.$axios
                            .get('admin/index_delete', {
                                params: {
                                    token: this.queryinfo.token,
                                    id: this.SelectAllDetails
                                }
                            })
                            .then((res) => {
                                if (res.status == 200) {
                                    this.$message({
                                        type: 'success',
                                        message: '删除成功!'
                                    });
                                }
                                this.ListofDetails()
                            });
                    }
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        //全选
        handleSelectionChange(val) {
            console.log(val);
            this.SelectAll_id = val
                .map(function (obj, index) {
                    return obj.id;
                })
                .join(',');
            // console.log('wozai', this.SelectAll_id);
        },
        //首页大类批量删除
        btndellist() {
            this.$confirm('会同时删除属于这个大类的子类，确定删除吗', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then((action) => {
                    if (action === 'confirm') {
                        this.$axios
                            .get('admin/type_delete', {
                                params: {
                                    token: this.queryinfo.token,
                                    id: this.SelectAll_id
                                }
                            })
                            .then((res) => {
                                if (res.status == 200) {
                                    this.$message({
                                        type: 'success',
                                        message: '删除成功!'
                                    });
                                }
                                this.ListDropdown();
                            });
                    }
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        //点击详情列表
        categorybtnView(row) {
            this.details_id = row.id;
            console.log(this.details_id)
            for(let key in this.firstdropDown){
                if(this.firstdropDown[key] === row.type){
                   this.edit_type = key
                }
            }
            // console.log('this.edit_type',this.edit_type)
            // console.log(this.details_id)
            this.categoryactiveName = 'second';
            this.$axios
                .get('admin/index_list', {
                    params: {
                        token: this.queryinfo.token,
                        id: row.id,
                        page: this.queryinfo.page,
                        page_size: this.queryinfo.page_size,
                        keyword: this.categoryKey
                    }
                })
                .then((res) => {
                    // console.log(res)
                    this.categorylist = res.data.data.data;
          
                    this.categorysrcList = res.data.data.data.map((item) => {
                        return item.prefix_img;
                    });
                    if (this.categorylist.length !== 0) {
                        this.type = this.categorylist[0].type;
                        console.log(this.type)
                        this.type_count = res.data.data.count;
                    }
                });
        },
        //详情弹出框取消
        cancelbtn(newForm) {
            console.log('wozia');
            this.newVisiblecaterory = false;
            this.$nextTick(() => {
                this.$refs[newForm].resetFields(); // this.$refs.form.resetFields();
            });
            this.NewruleFormcaterory.sort = '';
            this.NewruleFormcaterory.title = '';
            this.NewruleFormcaterory.style_no = '';
            this.NewruleFormcaterory.type_content = '';
            this.NewruleFormcaterory.titletext = ''
            this.NewruleFormcaterory.states = 2;
            this.imageUrls = '';
        },
        //点击新增详情弹出框确定按钮
        NewbtnAddcategory() {
            console.log(this.details_id)
            this.newVisiblecaterory = false;
            this.$axios
                .post('admin/index_add', {
                    token: this.queryinfo.token,
                    type: this.details_id,
                    img: this.imageUrl,
                    img_url: this.imageUrls,
                    title: this.NewruleFormcaterory.title,
                    content_text: this.NewruleFormcaterory.content_text,
                    style_no: this.NewruleFormcaterory.style_no,
                    type_content: this.NewruleFormcaterory.type_content,
                    sort: this.NewruleFormcaterory.sort,
                    states: this.NewruleFormcaterory.states
                })
                .then((res) => {
                    this.$message.success('添加完成');
                    this.ListofDetails();
                    this.NewruleFormcaterory.sort = '';
                    this.NewruleFormcaterory.title = '';
                    this.NewruleFormcaterory.style_no = '';
                    this.NewruleFormcaterory.type_content = '';
                    this.NewruleFormcaterory.states = 2;
                    this.NewruleFormcaterory.content_text = ''
                    // this.NewruleFormcaterory.
                    this.imageUrls = '';
                });
        },
        //上传图片方法
        //图片上传的成功回调
        handleAvatarSuccess(res, file) {
            // console.log(res);
            this.imageUrls = file.response.data.imgs;
            this.imageUrl = file.response.data.img;
            // console.log(this.type_img);
            if (res.code === 2000) {
                if (file.response.data.img === this.edit_img) {
                    this.imageUrls = this.categoryruleForm.prefix_img;
                    console.log('没有更改图片');
                } else {
                    this.categoryruleForm.prefix_img = file.response.data.imgs;
                    this.edit_img = file.response.data.img;
                }
            }
        },
        //上传文件之前的回调，参数为上传的文件
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg' || 'image/jpg' || 'image/webp' || 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error('图片格式不正确！(只能包含jpg，png,webp,JPEG)');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        //  详情编辑事件
        categorybtnchange(row) {
            this.detailsedit_id = row.id
            this.categoryVisiblechange = true;
            this.categoryruleForm.sort = row.sort;
            this.categoryruleForm.states = row.states;
            this.categoryruleForm.style_no = row.style_no;
            this.categoryruleForm.title = row.title;
            this.categoryruleForm.prefix_img = row.prefix_img;
            this.categoryruleForm.content_text = row.content_text;
            this.edit_img = row.img
            this.categoryruleForm.type_content = row.type_content;
            
        },
         //详情编辑弹出框确定按钮
        categoryedit() {
            console.log(this.details_id)
            this.$axios
                .post('admin/index_update', {
                    token: this.queryinfo.token,
                    id: this.detailsedit_id,
                    type:this.type,
                    img: this.edit_img,
                    img_url: this.categoryruleForm.prefix_img,
                    title:this.categoryruleForm.title,
                    content_text: this.categoryruleForm.content_text,
                    style_no:this.categoryruleForm.style_no,
                    type_content: this.categoryruleForm.titletext,
                    sort:this.categoryruleForm.sort,
                    states:this.categoryruleForm.states
                })
                .then((res) => {
                    this.categoryVisiblechange = false;
                    this.$message.success('修改成功');
                    this.ListofDetails();
                });
        },
        //品类switch表格开关事件
        changeSwitch1(e, row, index) {
            console.log(e, row, index);
            this.$axios.post('admin/index_update', {
                token: this.queryinfo.token,
                id: row.id,
                type: row.type,
                img: row.img,
                img_url: row.prefix_img,
                title: row.title,
                content_text: row.type_content,
                type_content: row.title,
                sort: row.sort,
                states: row.states
            });
        },
        //新增详情表格switch
        categorychangeswitch(e) {
            console.log('e', e);
        },
        //新增大类弹出框关闭事件
        handleClosetype(){
            this.newVisiblechange = false;
            this.$nextTick(() => {
                this.firstEjectFrom.type_name = '', 
                this.value = ''
                this.firstEjectFrom.sort = '', 
                this.firstEjectFrom.states = 2;
            })
        },
        ListCancel(){
            this.newVisiblechange = false;
            this.$nextTick(() => {
                this.firstEjectFrom.type_name = '', 
                this.value = ''
                this.firstEjectFrom.sort = '', 
                this.firstEjectFrom.states = 2;
            })
        },
        //新增详情弹出框关闭事件
        handleClose() {
            this.newVisiblecaterory = false;
            this.$nextTick(() => {
                this.NewruleFormcaterory.sort = '';
                this.NewruleFormcaterory.title = '';
                this.NewruleFormcaterory.style_no = '';
                this.NewruleFormcaterory.type_content = '';
                this.NewruleFormcaterory.states = 2;
                this.imageUrls = '';
                this.$refs['newForm'].resetFields();
            });
        },
        // 详情删除
        categorydel(row) {
            this.$confirm('会同时删除属于这个大类的子类，确定删除吗', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then((action) => {
                    if (action === 'confirm') {
                        this.$axios
                            .get('admin/index_delete', {
                                params: {
                                    token: this.queryinfo.token,
                                    id: row.id
                                }
                            })
                            .then((res) => {
                                if (res.status == 200) {
                                    this.$message({
                                        type: 'success',
                                        message: '删除成功!'
                                    });
                                }
                                this.ListofDetails();
                            });
                    }
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        //点击新增详情下拉列表
        btnaddCategory() {
            this.newVisiblecaterory = true;
        },
        //触发详情搜索按钮
        caterorySearch() {
            this.keyword = this.categoryKey;
            this.ListofDetails();
        },
        // 监听pagesize改变的事件
        handleSizeChange(newSize) {
            // console.log(newSize);
            // this.queryinfo.page = newSize;
            // this.Cugetlist();
        },
        // 监听页码值的改变的事件
        handleCurrentChange(newPage) {
            // console.log(newPage);
            // this.queryinfo.newPage = newPage;
            // this.Cugetlist();
        },
        //品目sithch开关事件
        changeSwitch2(row) {
            // console.log(row);
        },
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}
.bd_item {
    /* background-color: white; */
    border: 0px;
    color: rgb(64, 158, 255);
}
.handle-input {
    width: 300px;
    display: inline-block;
}
.userhandle {
    margin-left: 10px;
}
.del_item {
    border: 0px;
    color: red;
}
.add {
    font-size: 12px;
}
#adduser {
    margin-right: 10px;
}
.inputhour {
    display: flex;
    justify-content: space-between;
}
.table {
    width: 100%;
    font-size: 14px;
}
.hadle1 {
    width: 80%;
    margin-left: 10px;
}
.spanitem {
    margin-left: 10px;
}
.span1 {
    color: gainsboro;
    margin-top: -30px;
    position: absolute;
}
/* .el-upload--text{
    width: 180px;
} */
/deep/.el-upload--text {
    width: 180px;
}
.el-pagination {
    margin-top: 10px;
}
.tabeheared {
    width: 20px;
    color: rgb(64, 158, 255);
    font-weight: bolder;
}
#dialogbox {
    text-align: left;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
#upload .el-upload--text {
    width: 0;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
